<template>
  <div id="app">
    <div class="home" v-show="$route.meta.notTrun">
      <div class="nav-bar">
        <div class="bar-left">
          <div class="logo">
            <img src="@/assets/img/logo1.png" alt />
          </div>
          <div class="bar-menu">
            <div
              :class="['menu-item', activeMenu === item.id && 'active-menu']"
              v-for="(item, index) in menuData"
              :key="index"
              @click="add(item.id)"
            >
              <router-link class="menu-a" :to="item.path">
                <div class="menu-item active-menu menu-two">
                  <img
                    class="menu-icon"
                    :src="activeMenu === item.id ? item.activeIcon : item.icon"
                    alt
                  />
                  <span
                    :class="[
                      'menu-span',
                      activeMenu === item.id && 'span-active',
                    ]"
                    >{{ item.text }}</span
                  >
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="bar-right">
          <div class="bar-icon">
            <div
              class="icon-box"
              @mouseenter="toogleMouseEnter"
              @mouseleave="toogleMouseLeave"
            >
              <img src="@/assets/img/toggle.png" alt />
            </div>
            <div class="icon-box">
              <img src="@/assets/img/tongzhi.png" alt />
            </div>
            <div class="icon-box">
              <img src="@/assets/img/xiazai.png" alt />
            </div>
            <div class="icon-box" @click="handleClose">
              <img src="@/assets/img/kaiguan.png" alt />
            </div>
          </div>
          <transition name="el-zoom-in-top">
            <div
              :class="['toogle-drop-down']"
              v-if="isMove"
              @mouseenter="toogleMouseEnter"
              @mouseleave="toogleMouseLeave"
            >
              <div class="drop-down-triangle"></div>
              <ul class="toogle-menu-list">
                <li
                  v-for="(item, index) in toogleItemData"
                  :key="index"
                  class="menu-list-item"
                  @click="handleLi(item)"
                  v-if="$route.path !== item.path"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      videoPlayerOne: null,
      videoPlayerTwo: null,
      videoPlayerThree: null,
      videoPlayerFour: null,
      activeVideo: 1,
      activeMenu: 1,
      activeListBar: 0,
      sliderValue: 50,
      activeItem: 1,
      isMove: false,
      menuData: [
        {
          id: 1,
          text: '预览',
          icon: require('@/assets/img/sxt.png'),
          activeIcon: require('@/assets/img/sxt-active.png'),
          path: '/home',
        },
        {
          id: 2,
          text: '地图',
          icon: require('@/assets/img/icon-map.png'),
          activeIcon: require('@/assets/img/icon-map-active.png'),
          path: '/map',
        },
        {
          id: 3,
          text: '回放',
          icon: require('@/assets/img/replay.png'),
          activeIcon: require('@/assets/img/replay-active.png'),
          path: '',
        },
        {
          id: 4,
          text: '检索',
          icon: require('@/assets/img/caidan.png'),
          activeIcon: require('@/assets/img/caidan-active.png'),
          path: '',
        },
        {
          id: 5,
          text: '配置',
          icon: require('@/assets/img/shezhi.png'),
          activeIcon: require('@/assets/img/shezhi-active.png'),
          path: '/Configure',
        },
      ],
      toogleItemData: [
        {
          name: '监测系统',
          path: '/home',
        },
        {
          name: '扬尘系统',
          path: '/Dust',
        },
        {
          name: '临边保护监测',
          path: '/protect',
        },
        {
          name: '物料管理平台',
          path: '/metering',
        },
        {
          name: '视频会议',
          url: 'https://meeting.tencent.com/password-login.html',
        },
        {
          name: '安全帽',
          url: 'https://beidou-gps.cn/',
        },
        {
          name: '噪声',
          url: 'http://yun.lwbsq.com',
        },
        {
          name: '监控',
          url: 'http://218.108.168.190:81',
        },
        {
          name: '黑匣子',
          url: 'https://zhuang.pinming.cn/',
        },
      ],
    }
  },
  created() {
    const loginStatus = parseInt(localStorage.getItem('IS_LOGIN'))
    if (!loginStatus) {
      this.$router.push('/')
    } else {
      // this.$router.push('/home')
    }
  },
  methods: {
    add(a) {
      this.activeMenu = a
    },
    toDust() {
      let { path } = this.$route
      if (path === '/Dust') {
        this.$router.push('/home')
      } else {
        this.$router.push('/Dust')
      }
    },
    toogleMouseEnter() {
      this.isMove = true
      clearTimeout(this.timer)
    },
    toogleMouseLeave() {
      this.timer = setTimeout(() => (this.isMove = false), 100)
    },
    handleLi(item) {
      this.isMove = false
      if (item.url) {
        window.open(item.url)
      } else {
        this.$router.push(item.path)
      }
    },
    handleClose() {
      localStorage.setItem('IS_LOGIN', 0)
      this.$router.push('/')
    },
  },
  watch: {
    $route(to, from) {
      const PATH_ARR = ['/home', '/map', '', '', '/Configure']
      PATH_ARR.some((item, index) => {
        if (item === to.path) {
          this.activeMenu = index + 1
          return true
        } else {
          this.activeMenu = undefined
        }
      })
    },
  },
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
</style>
<style scoped lang="less">
.home {
  width: 100%;
  /*overflow: hidden;*/
  background-color: #313039;
  font-size: 0;

  .video-js {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .nav-bar {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bar-left {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .logo {
        width: 1.8rem;
        margin-left: 0.38rem;

        > img {
          width: 100%;
        }
      }

      .bar-menu {
        margin-left: 0.78rem;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .menu-a {
          text-decoration: none;
          width: 100%;
          height: 100%;
        }

        .menu-item {
          width: 1.07rem;
          height: 100%;
          margin-right: 1.2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 0.02rem solid rgba(2, 2, 2, 0);
          box-sizing: border-box;
          cursor: pointer;

          .menu-a {
            text-decoration: none;
          }

          .menu-icon {
            height: 0.38rem;
          }

          .menu-span {
            font-size: 0.2rem;
            color: #817f8b;
          }
        }

        .active-menu {
          border-bottom: 0.02rem solid #ffffff;

          .menu-span {
            color: #7a7a80;
          }

          .span-active {
            color: #fff;
          }
        }

        .menu-two {
          border: 0;
        }
      }
    }

    .bar-right {
      height: 100%;
      margin-right: 0.2rem;
      user-select: none;
      position: relative;
      .bar-icon {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .icon-box {
          height: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin-left: 0.4rem;
          > img {
            width: 0.23rem;
            height: 0.23rem;
            cursor: pointer;
          }
        }
      }
      .toogle-drop-down {
        width: 1.4rem;
        position: absolute;
        top: 0.8rem;
        right: 1.4rem;
        border-radius: 0.06rem;
        z-index: 1002;
        .drop-down-triangle {
          position: absolute;
          top: -0.2rem;
          left: 50%;
          transform: translateX(-50%);
          border-right: 0.1rem solid transparent;
          border-left: 0.1rem solid transparent;
          border-bottom: 0.1rem solid #fff;
        }
        .toogle-menu-list {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          background-color: #65646b;
          border-radius: 0 0 0.05rem 0.05rem;
          overflow: hidden;
          .menu-list-item {
            width: 100%;
            height: 0.57rem;
            text-align: center;
            line-height: 0.57rem;
            color: #dcdcdc;
            font-size: 0.18rem;
            border-bottom: 0.02rem solid #75747a;
            list-style: none;
            border-radius: 0;
            cursor: pointer;
            &:hover {
              color: #ffffff;
            }
          }
        }
      }
      .drop-down-show {
      }
    }
  }
}
</style>
